<!DOCTYPE html>
<html>

	<head>
		<meta charset="{CHARSET}">
		<title></title>
		<style type="text/css">
			#root {
				width: 600px;
				height: 600px;
				background-color: #006600;
				margin: 0 auto;
				display: flex;
				flex-wrap: wrap;
			}
			
			li {
				list-style: none;
				width: 120px;
				height: 120px;
				background-color: red;
				margin: 10px;
				text-align: center;
				line-height: 100px;
				font-size: 60px;
				color: white;
				justify-content: space-around;
			}
		</style>
	</head>

	<body>
		<div id="root">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</div>
	</body>

</html>
<script type="text/javascript">
	var fang = document.getElementsByTagName('li');
	//随机数
	function rdm(min, max) {
		return Math.floor(Math.random() * (max - min) + min);
	}
	//颜色
	function clo() {
		return rdm(20, 200);
	}
	//随机数组的值;
	function shu() {
		return rdm(0, 30);
	}
	var arr1 = [];
	
	for(var i = 0; i < 8; i++) {
		var a = 0;
	    var	b= shu();
		for(var j=0; j<arr1.length;j++){
			if(b==arr1[j]){
				a=1;
				break;
			}
			
		}
		if(a==0){
			arr1[i]=b;
		}
		else{
			i--;
		}
		
	}
	var arr2 = [];
	for(var i = 0; i < 16; i++) {
		if(i < 8) {
			arr2[i] = arr1[i];
		} else {
			arr2[i] = arr1[i - 8]
		}
	};
	console.log(arr2);
	//打乱数组
	function xipai() {
		arr2.sort(function(a, b) {
			return Math.random() - 0.5;
		})
	}
	xipai();
	//随机数
	//方块随机颜色
	for(var i = 0; i < fang.length; i++) {
		fang[i].style.backgroundColor = "rgb(" + clo() + "," + clo() + "," + clo() + ")";
		fang[i].innerHTML = arr2[i];
	};
	var jiluarr = [];
	var xiabiao = [];
	var count = 0;
	for(var i = 0; i < fang.length; i++) {
		fang[i].onclick = function() {
			count++;
			for(var j = 0; j < fang.length; j++) {
				if(this == fang[j]) {
					xiabiao.push(j);
					jiluarr.push(this.innerHTML);
					console.log(jiluarr);

					if(count == 2) {
						if(jiluarr[0] == jiluarr[1] && xiabiao[0] != xiabiao[1]) {
							jiluarr = [];

							fang[xiabiao[0]].style.opacity = 0;
							fang[xiabiao[1]].style.opacity = 0;
							xiabiao = [];
							console.log(xiabiao);
							console.log(count);
							count = 0;
						} else {
							jiluarr = [];
							xiabiao = [];
							count = 0;
						}
					}
				}
			}

		}
	}
</script>